<!--
 * @Author: your name
 * @Date: 2021-08-05 14:16:44
 * @LastEditTime: 2021-08-05 14:36:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\15-组件\多组件-tabs选项卡.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css"/>
    <script src="./components/tabsoption.js"></script>
    <script src="./components/tabs.js"></script>
    <title>Title</title>
</head>
<style>
    .tabs {
        margin: 20px;
        border-radius: 5px;
        width: 400px;
        height: 400px;
        border: 1px solid #eee;
    }

    .title li {
        padding: 2px 16px;
        border: 1px solid #eee;
        margin: 0 5px;
        border-radius: 5px;
    }

    .title li.active {
        background-color: orangered;
    }

    .content {
        margin-top: 10px;
    }
</style>

<body>
<div id="app" class="tab">
    <!-- 子组件和父组件的相互通信可以用 两个-对象
      - $parent $children
      -->
    <b-tabs :list="cityList">
    <b-tab-item>组件之间的内容要显示的话必须在组件中加入插槽slot</b-tab-item>
    <b-tab-item>
        <button>这是一个按钮</button>
    </b-tab-item>
    <b-tab-item><textarea name="" id="" cols="30" rows="4">这是一个富文本框</textarea></b-tab-item>
    <b-tab-item><input type="text">这是一个输入框</b-tab-item>
    </b-tabs>
</div>
<script>    
    new Vue({
        el: "#app",
        data() {
            return {
                cityList: ["北京", "上海", "苏州", "杭州"],
            };
        },
    });
</script>
</body>
</html>
